<template>
  <div>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="50%">
        
        <!-- TreeView -->
        <TreeView @sendTreeData="getTreeData"/>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :disabled="isDisable" @click="innerVisible = true">确定并添加分组</el-button>
        </span>

        <!-- 内层弹窗 -->
        <el-dialog width="45%" title="商品规格参数配置" :visible.sync="innerVisible" append-to-body :before-close="closeInner">
            <div class="title">当前选中的商品为：{{treeData.name}}</div>
            <el-button type="primary" @click="addDomain">新增规格列表</el-button>

            <hr>

            <!-- domains: [{title:'',value:'',children:[{title:',value:''},{}]}] -->
            <el-form :model="dyForm" ref="dynForm" label-width="120px" class="demo-dynamic">
                <el-form-item
                    v-for="(domain, index) in dyForm.domains"
                    :label="domain.title"
                    :key="index"
                    :prop="domain.title"
                    :rules="{
                    required: true, message: '规格不能为空', trigger: 'blur'
                    }"
                >
                    <div class="buttons">
                        <el-input v-model="domain.title"></el-input>
                        <el-button @click.prevent="addChildDomain(index)">添加子项</el-button>
                        <el-button @click.prevent="removeDomain(index)">删除</el-button>
                    </div>

                    <!-- 内层表单项 -->
                    <el-form-item
                        v-for="(item, i) in domain.children"
                        :label="item.title"
                        :key="i"
                        :prop="item.title"
                    >
                        <div class="buttons">
                            <el-input v-model="item.title"></el-input>
                            <el-button @click.prevent="removeChildDomain(index, i)">删除子项</el-button>
                        </div>
                    </el-form-item>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="closeInner">取 消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </span>
        </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import TreeView from '@/views/Goods/TreeView.vue'
import { addParams, updateParams } from '@/api';
export default {
    props:{
        title:{
            type:String,
            default:function(){
                return "";
            }
        },
        rowData:{
            type:Object,
            default:function(){
                return {};
            }
        }
    },
    components:{
        TreeView
    },
    data(){
        return{
            dialogVisible: false, //外弹窗
            innerVisible: false, //内弹窗
            isDisable: true, //默认不可点击状态，点过节点后，才能点击
            treeData:{},  //节点对象
            dyForm: {
                domains: []
            }
        }
    },
    //监听器
    watch:{
        rowData(val){
            console.log(val);
            // this.treeData = val;
        }
    },
    methods:{
        //监听 TreeView 点击的节点，并且获取数据
        getTreeData(data){
            console.log(data);
            this.isDisable = false;  //[确定并获取分组] 变成可点击
            this.treeData = data; //保存
            console.log(this.treeData);
        },
        // 提交表单
        submitForm() {
            this.$refs.dynForm.validate(async valid => {
                if (valid) {
                    //判断是添加还是编辑
                    if(this.title === "添加规格参数"){
                        try {
                            // 参数：itemCatId（类目ID）,content,specsName
                            const res = await addParams({
                                itemCatId: this.treeData.cid,
                                content: JSON.stringify(this.dyForm.domains),
                                specsName: this.treeData.name
                            });
                            console.log(res);
                            if(res.status === 200){
                                // 1、友好提醒
                                this.$message.success("添加成功！！！");
                                // 2、关闭内外弹窗
                                this.dialogVisible = false;
                                this.innerVisible = false;
                                // 3、清空
                                this.dyForm.domains = [];
                                // 4、刷新规格参数列表数据
                                this.$parent.getParamsByPage(1);
                            }else{
                                this.$message.error("添加失败！！！");
                            }
                        } catch (error) {
                            console.log(error);
                        }
                    }else{
                        console.log("编辑");
                        // 参数 cid content id  specsName
                        try {
                            const res = await updateParams({
                                id: this.treeData.id,
                                content: JSON.stringify(this.dyForm.domains),
                                cid: this.treeData.cid,
                                specsName: this.treeData.name
                            })
                            console.log(res);
                            if(res.status === 200){
                                this.$message({
                                    message: '恭喜你，编辑成功！',
                                    type: 'success'
                                });
                                //关闭内外弹窗
                                this.dialogVisible = false;
                                this.innerVisible = false;
                                //清空
                                this.dyForm.domains = [];
                                this.$parent.getParamsByPage(1); //更新父组件数据列表
                            }else{
                                this.$message.error("编辑失败！！");
                            }
                        } catch (error) {
                            console.log(error);
                        }
                    }
                } else {
                    console.log('数据有误，请重新填写！！!');
                    this.$message.error("数据有误，请重新填写！！!");
                    return false;
                }
            });
        },
        // 取消表单提交
        closeInner(){
            this.innerVisible = false;
            this.dyForm.domains = [];
        },
        // 重置
        resetForm() {
            this.$refs.dynForm.resetFields();
        },
        // 添加子项
        addChildDomain(index){
            this.dyForm.domains[index].children.push({title:'',value:''})
        },
        // 删除子项
        removeChildDomain(index, i){
            this.dyForm.domains[index].children.splice(i, 1)
        },
        // 删除
        removeDomain(index) {
            this.dyForm.domains.splice(index, 1)
        },
        // 新增
        addDomain() {
            this.dyForm.domains.push({
                title: '',
                value: '',
                children:[]
            });
        }
    }
}
</script>

<style lang="less" scoped>
    hr{
        margin: 10px 0;
    }
    .buttons{
        display: flex;
        input{
            flex: 1;
        }
        button{
            margin-left: 7px;
        }
    }
</style>